import React, { useEffect, useMemo, useState } from 'react'
import styles from './msg.module.css'

import { Input, Button } from 'antd-mobile'
function Index() {
  // 输入框内容
  const [value, setValue] = useState('')
  let server_id=5432
  let user_id=1
  let [list,setlist]=useState([])
  const socket = useMemo(() => {
    // Create WebSocket connection.
    return new WebSocket(`ws://124.221.74.149/8003/koa/ws
      ?server_id=${server_id}&user_id=${user_id}`);

  }, [])

  useEffect(() => {
    // Connection opened
    socket.addEventListener("open", function (event) {
      socket.send(JSON.stringify('getChatList'));
    });

    // Listen for messages
    socket.addEventListener("message", function (event) {
      console.log("Message from server ", event.data);
    });
  }, [])


  return (
    <div className={styles.box}>
      <main className={styles.main}>
        <div className={styles.gun}>
          <div className={styles.list}>
            <img style={{ width: '40px', height: '40px', borderRadius: '50%', margin: '10px' }}
              src="https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60" alt="" />
            <div className={styles.zi}>
              <p>111</p>
            </div>
          </div>

        </div>
      </main>
      <footer className={styles.footer}>
        <Input
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        <Button style={{ width: '100px' }}>发送</Button>
      </footer>
    </div>
  )
}

export default Index
